<template>
  <div class="page">
    <div class="page-bg">
      <div class="page7">
        <div class="page-title">
          工单辐射
        </div>
        <div class="page-content">
          <div class="echarts">
            <div class="legend">全部工单</div>
            <div id="echarts07"></div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
let zoomstart = 0,
  zoomend = 100;
import { echartsConfig } from "@/common/echartsConfig.js";
import requst from "@/api/api";

export default {
  name: "page7",
  components: {},
  data() {
    return {
      chartData: [],
    };
  },
  async mounted() {
    const {
      data: { data },
    } = await requst.get("/api/1/page/7", {});
    this.chartData = data;
    this.getEcharts();
  },
  methods: {
    getEcharts() {
      const xAxisData = this.chartData.x;
      const yAxisData_1 = this.chartData["y-1"];
      const yAxisData_2 = this.chartData["y-a"];

      const yAxisData_3 = yAxisData_2.map((e) => (e === Math.max.apply(null, yAxisData_2) ? e : ""));
      // const yAxisData_4 = TOTAL.map((e) => (e === Math.min.apply(null, TOTAL) ? e : ""));

      let param = {
        xAxisData: xAxisData,
        yAxisData_1: yAxisData_1,
        yAxisData_2: yAxisData_2,
        yAxisData_3: yAxisData_3,
      };

      this.echarts01(param);
      this.timer = setInterval(() => {
        this.echarts01(param);
      }, 2000);
    },
    echarts01(echart) {
      let that = this;
      let emptyColor = "#3559A4";
      let myChart = that.$echarts.init(document.getElementById("echarts07"));
      let option = {
        legend: {
          ...echartsConfig.legend,
          data: ["已完成工单"],
        },
        title: {
          ...echartsConfig.title,
          text: "工单总量 (单）",
        },
        grid: {
          ...echartsConfig.grid,
        },
        yAxis: [
          {
            ...echartsConfig.yAxis,
          },
        ],
        dataZoom: [
          {
            type: "slider",
            show: false,
            start: that.zoomStart(),
            end: that.zoomEnd(echart.xAxisData.length),
            xAxisIndex: [0, 1],
          },
        ],
        xAxis: [
          {
            ...echartsConfig.xAxis,
            data: echart.xAxisData,
            axisLabel: {
              interval: 0,
              margin: 22,
              color: "rgba(255,255,255,1)",
              fontSize: 32,
              formatter: function(data) {
                if (data.length > 4) {
                  return data.substr(0, 4) + "...";
                } else {
                  return data;
                }
              },
            },
          },
          {
            type: "category",
            axisLine: {
              show: false,
            },
            axisTick: {
              show: false,
            },
            axisLabel: {
              show: false,
            },
            splitArea: {
              show: false,
            },
            splitLine: {
              show: false,
            },
            data: echart.xAxisData,
          },
        ],
        series: [
          {
            type: "bar",
            xAxisIndex: 1,
            zlevel: 1,
            itemStyle: {
              normal: {
                color: emptyColor,
              },
            },
            barWidth: 64,
            data: echart.yAxisData_1,
          },
          {
            name: "已完成工单",
            type: "bar",
            itemStyle: {
              normal: {
                show: true,
                color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  { offset: 0, color: "#4394FF" },
                  { offset: 1, color: "#7EEFFF" },
                ]),
                barBorderRadius: 4,
              },
            },
            zlevel: 2,
            barWidth: 64,
            data: echart.yAxisData_2,
          },
          {
            name: "",
            type: "bar",
            itemStyle: {
              normal: {
                show: true,
                color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  { offset: 0, color: "#FFD993" },
                  { offset: 1, color: "#FF7D61" },
                ]),
                // barBorderRadius: 4,
              },
            },
            zlevel: 2,
            barWidth: 64,
            barGap: "-100%",
            data: echart.yAxisData_3,
          },
        ],
      };
      myChart.setOption(option, true);
    },
    zoomStart() {
      if (zoomend >= 100) {
        zoomstart = 0;
      } else {
        zoomstart += 10;
      }
      return zoomstart;
    },
    zoomEnd(length) {
      var displayNum = 7;
      if (length > displayNum && zoomstart === 0) {
        zoomend = (displayNum / length) * 100;
      } else if (length > displayNum) {
        zoomend += 10;
      } else {
        zoomend = 100;
        clearInterval(this.timer);
      }
      return zoomend;
    },
  },
};
</script>
<style lang="scss" scoped>
.page7 {
  .page-content {
    .echarts {
      position: relative;
      width: 1824rem;
      height: 820rem;
      #echarts07 {
        width: 1824rem;
        height: 820rem;
      }

      .legend {
        position: absolute;
        right: 8%;
        top: 80rem;
        font-size: 32rem;
        font-weight: 400;
        color: #ffffff;
        &:before {
          content: "";
          width: 32rem;
          height: 20rem;
          display: inline-block;
          margin-right: 10rem;
          background: #3559a4;
        }
      }
    }
  }
}
</style>
